{% extends 'base.html' %}

{% block title %}{{topic['title']}}{% endblock %}

{% block content %}
	<article class="weui-article">
      <h1>{{topic['title']}}</h1>
      <p class="weui-cells__title">{{topic['user'].nickname}} {{topic['pub_time'].strftime('%Y-%m-%d %H:%M:%S')}}</p>
        <section>
          <p>
          	{% autoescape false %}
				{{topic['content']}}
          	{% endautoescape %}
          </p>
        </section>
    </article>

    <div class="weui-panel weui-panel_access">
        <div class="weui-panel__hd">回复</div>
        <div id="reply_panel" class="weui-panel__bd">
 		{% for reply in topic.replies %}
           <div class="weui-cell">
	        <div class="weui-cell__hd" style="position: relative;margin-right: 10px;">
	        {% if reply['user'].avatar %}
	          <img src="{{reply['user'].avatar}}" style="width: 50px;display: block">
	        {% else %}
	          <img src="/static/images/avatar.jpg" style="width: 50px;display: block">
	        {% endif %}
	        </div>
	        <div class="weui-cell__bd">
	          <p style="font-size: 13px;color: #888888;">{{reply['user'].nickname}}  <span style="float:right">{{reply['pub_time'].strftime('%Y-%m-%d %H:%M:%S')}}</span></p>
	          <p>{{reply['content']}}</p>
	        </div>
      		</div>
      	{% endfor %}
        </div>
{% if g.user %}
		    <div class="weui-cells weui-cells_form">
		      <div class="weui-cell">
		        <div class="weui-cell__bd">
		          <textarea class="weui-textarea" placeholder="请输入回复" rows="3"></textarea>

		        </div>
		      </div>

		      <div class="weui-cell">
			      <div class="button_sp_area">
			        <a href="javascript:postReply();" class="weui-btn weui-btn_mini weui-btn_default">回复</a>
			     </div>
		     </div>

		    </div>
{% endif %}			     

    </div>
{% endblock %}
{% block jsblock %}

function postReply() {
	if(!$(".weui-textarea").val()) {
		 $.toast("请输入回复内容", "forbidden");
		 return;
	}
	postData = {content:$(".weui-textarea").val(),tpcId:{{topic['id']}}};
	$.ajax({
	  type: 'POST',
	  url: '/postTopicReply',
	  data: JSON.stringify(postData),
	  dataType : "json",
	  contentType: "application/json;charset=UTF-8",
	  success: function(data) {
	  			divHtml="";
	  			 $.each(data['replies'], function (n, reply) {
	  			 	var avatarPath = '/static/images/avatar.jpg';
	  			 	if(reply.user.avatar) {
	  			 		avatarPath = reply.user.avatar;
	  			    }
	  			  	divHtml = divHtml+'<div class="weui-cell"><div class="weui-cell__hd" style="position: relative;margin-right: 10px;">'
	  				                 +'<img src="'+ avatarPath + '" style="width: 50px;display: block"></div><div class="weui-cell__bd">'
	  				                 +'<p style="font-size: 13px;color: #888888;">'+ reply.user.nickname +'<span style="float:right">' + reply.pub_time
	  				                 +'</span></p><p>' + reply['content'] +'</p></div></div>';
	  			 });
	  			$("#reply_panel").html(divHtml);
	  			$.toast("回复成功", function() {
		          $(".weui-textarea").val("")
		        });
	           },
	  error: function(msg) {
	  			$.toast("回复失败请重试", "forbidden");
			}
	});

}
{% endblock %}